<template>
  <div id="swiper">
    <div>
      <carousel-3d
        :autoplay="true"
        :width="cWidth"
        :height="cHeight"
        :autoplayTimeout="2000"
        :display="5"
        :animationSpeed="1000"
      >
        <slide v-for="(slide, i) in slides" :index="i" :key="i">
          <div class="box">
            <div class="item">
              <div class="fontItem">
                {{ slide.title }}
              </div>
            </div>
          </div>
        </slide>
      </carousel-3d>
    </div>
  </div>
</template>

<script>
import { Carousel3d, Slide } from "vue-carousel-3d";
export default {
  name: "swiper-example-thumbs-gallery",
  data() {
    return {
      slides: [
        {
          title: "政府",
        },
        {
          title: "公安",
        },
        {
          title: "河北大学",
        },
        {
          title: "工商银行",
        },
        {
          title: "国家电网",
        },
        {
          title: "长城汽车",
        },
      ],
    };
  },
  components: {
    Carousel3d,
    Slide,
  },
  created() {
    this.changeWidth();
  },
  mounted() {
    window.onresize = () => {
      this.changeWidth();
    };
  },
  methods: {
    //根据电脑分辨率设置轮播图宽度
    changeWidth() {
      this.cWidth = (document.body.clientWidth / 10) * 2;
      this.cHeight = (document.body.clientHeight / 10) * 1.8;
      console.log("------------------------");
      console.log("cWidth", this.cWidth);
      console.log("cHeight", this.cHeight);
    },
  },
};
</script>

//样式，自行更改即可
<style lang="scss" scoped>
#swiper {
  // .box {
  //   margin: 0.2vh 0.2vw;
  // }
  font-family: "electronicFont";

  .carousel-3d-slide {
    background-color: transparent;
    border: 0px;
    .item {
      width: 13vw;
      border-radius: 2vh;
      border: 4px solid #ddd;
      margin: 2vh auto;
      text-align: center;
      padding: 3vh;
      transition: box-shadow 0.5s ease-in;
      box-shadow: 0vh 0vh 20px rgb(167, 163, 223);
      .fontItem {
        color: white;
        font-size: 3vh;
      }
    }
  }
  .current {
    .item {
      background-color: rgba(223, 202, 202, 0.2);
    }
  }
}
</style>